<template>
  <div id="list">
    <a class="link" @click="link(index)" href="/listDetails" v-for="(item, index) in list" :key="index">
      <ul class="wrap">
        <li class="img">
          <img :src="item.img" alt="" srcset="">
        </li>
        <li class="lists">
          <ul>
            <li class="title">{{item.title}}</li>
            <li class="conf">
              <span v-for="(configuration, index) in item.configuration" :key="index">{{configuration}}</span>
            </li>
            <li class="memory">
              <span v-for="(memory, index) in item.memory" :key="index">{{memory}}</span>
            </li>
            <li class="price">￥{{item.price}}</li>
            <li class="evaluate">
              <img v-if="item.Ico" :src="item.Ico">
              <span>{{item.evaluate}}</span>
            </li>
            <li>
              <router-link to="">{{item.shop}}</router-link>>
            </li>
          </ul>
        </li>
      </ul>
    </a>
  </div>
</template>

<script>
export default {
  name: 'list',
  props: ['list', 'dataIndex'],
  data () {
    return {
    }
  },
  methods: {
    link (index) {
      console.log(index)
      localStorage.setItem('title', JSON.stringify(this.list[index].title))
      localStorage.setItem('dataIndex', JSON.stringify(this.dataIndex))
    }
  }
}
</script>

<style scoped lang="less">
#list {
  background: rgba(255, 255, 255, 1);
  .link {
    color: rgba(88, 88, 88, 0.8);
    font-size: 24px; /*px*/
    .wrap {
      display: flex;
      .img {
        width: 350px;
        margin: 25px;
        img {
          width: 100%;
        }
      }
      .lists {
        width: 100%;
        border-bottom: 1px solid rgba(188, 188, 188, 0.8);
        li {
          padding: 11px 0;
        }
        .title {
          color: rgba(8, 8, 8, 1);
          font-size: 28px; /*px*/
        }
        .conf {
          span {
            padding: 0 10px 0 0;
          }
        }
        .memory {
          span {
            padding: 0 5px;
            margin: 0 10px 0 0;
            font-size: 20px; /*px*/
            background: rgba(200, 200, 200, 1);
          }
        }
        .price {
          font-size: 32px; /*px*/
          color: rgba(255, 0, 0, 1);
        }
        .evaluate {
          img {
            height: 28px; /*px*/
            vertical-align: middle;
          }
          span {
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
